<template>
  <el-row>
    <el-col :span="10"><div class="check_list">
      <el-card class="check-card">
        <p class="check_num">已查询到符合查询条件的设备：{{ filteredData.length }}台</p>
        <el-table
            :data="filteredData"
            style="width: 100%" height="400px" highlight-current-row @current-change="handleCurrentChange">
          <el-table-column v-for="(val, key) in tableLabel" :prop="key" :label="val" :key="key"/>
        </el-table>
      </el-card>
    </div></el-col>
    <el-col :span="14"><div class="check_detail">
      <el-card class="detail-card">
        <el-empty v-if="!selectedDevice" description="暂无设备信息" style="height: 800px">
          <template #image>
            <div class="custom-empty-content">
              <img src="https://img2.imgtp.com/2024/04/03/fhG64MFW.png" class="custom-image">
            </div>
          </template>
        </el-empty>
        <div v-else>
          <div class="head">
            <h3 class="detail_title"></h3>
          </div>
        </div>
      </el-card>
    </div></el-col>
  </el-row>
</template>
<script>
export default {
  data() {
    return {
      selectedDevice:false,
      tableData: [
        {
          index:1,
          code:'B150',
          devCode:'266A0211B22F08',
          clientName:'北京云天创想科技有限公司',
          status:'已入库',
          time:'2024-03-19 15:20',
          user:'张三'
        },
        {
          index:2,
          code:'B151',
          devCode:'266A8156179DBE',
          clientName:'北京云天创想科技有限公司',
          status:'已入库',
          time:'2024-03-19 15:20',
          user:'张三'
        },
        {
          index:3,
          code:'B150',
          devCode:'266AF5D9020D7A',
          clientName:'时刻',
          status:'已出库',
          time:'2024-02-11 15:20',
          user:'张三'
        }
      ],
      tableLabel: {
        index: "序号",
        code: "机型代码",
        devCode: "设备唯一码",
        clientName: "客户名称",
        status: "状态",
        time: "执行时间",
        user: "操作员"
      }
    };
  },
  computed: {
    modelInput() {
      return this.$store.state.model_Input;
    },
    deviceInput() {
      return this.$store.state.device_Input;
    },
    clientInput() {
      return this.$store.state.client_Input;
    },
    dateInput() {
      return this.$store.state.date_Input;
    },
    radioValue() {
      switch (this.$store.state.radioValue) {
        case 1:
          return "已入库";
        case 2:
          return "已出库";
        case 3:
          return "已退货";
        case 4:
          return "已维修";
        case 5:
          return "已返工";
        default:
          return ""; // 如果 radioValue 的值不在指定的范围内，默认返回空字符串
      }
    },
    filteredData() {
      // 根据输入框的值（即 modelInput）过滤 tableData 中的数据
      return this.tableData.filter(item => {
         // 检查输入框的值是否为空，并根据不同的输入框应用不同的筛选条件
        let matchModel = !this.modelInput || item.code.includes(this.modelInput);
        let matchDevice = !this.deviceInput || item.devCode.includes(this.deviceInput);
        let matchClient = !this.clientInput || item.clientName.includes(this.clientInput);
        let matchTime = !this.dateInput || item.time.includes(this.dateInput);
        let matchStatus = !this.radioValue || item.status === this.radioValue;
        // 其他输入框的筛选条件...

        // 返回同时满足所有筛选条件的数据
        return matchModel && matchDevice && matchClient && matchTime && matchStatus; // && 其他条件...
      });
    }
  },
  methods: {
     handleCurrentChange(val) {
      this.selectedDevice = true;
      const devId = val.index;
      console.log(devId);
    },
  },
};
</script>
<style lang="less" scoped>
.check_list {
  .check-card {
    height: 800px;
    .check_num {
      font-size: 14px;
      color: #4E5969;
    }
  }
}
.check_detail {
  .detail-card {
    margin-left: 10px;
    height: 800px;
  }
}
.detail_title::before {
  content: '设备履历表';
  display: inline; /* 将 display 属性设置为 inline */
  width: auto; /* 让宽度自适应文字长度 */
  padding-left: 10px; /* 可以调整文字与竖杠的间距 */
  border-left: 3px solid #409EFF; /* 使用边框来模拟竖杠 */
  //position: relative; /* 设置相对定位 */
  //top: 50px; /* 调整标题向上偏移的距离 */
}
</style>